<div class="panel panel-default panel-intro">
    <div class="panel-heading">
        <h3 class="panel-title">入库明细 - {$row.inbound_no}</h3>
    </div>

    <div class="panel-body">
        <div class="row">
            <div class="col-sm-12">
                <div class="alert alert-info">
                    <h4><i class="fa fa-info-circle"></i> 入库单信息</h4>
                    <p><strong>入库单号：</strong>{$row.inbound_no}</p>
                    <p><strong>供应商：</strong>{$row.supplier.name}</p>
                    <p><strong>入库日期：</strong>{$row.inbound_date_text}</p>
                    <p><strong>总金额：</strong>¥{$row.total_amount}</p>
                    <p><strong>状态：</strong>
                        {if $row.status == 1}
                        <span class="label label-warning">待入库</span>
                        {elseif $row.status == 2}
                        <span class="label label-success">已入库</span>
                        {elseif $row.status == 3}
                        <span class="label label-default">已取消</span>
                        {/if}
                    </p>
                </div>
            </div>
        </div>

        <form id="items-form" class="form-horizontal" role="form" data-toggle="validator" method="POST" action="">
            <div class="row">
                <div class="col-sm-12">
                    <div class="panel panel-default">
                        <div class="panel-heading">
                            <h3 class="panel-title">入库明细</h3>
                        </div>
                        <div class="panel-body">
                            <div class="table-responsive">
                                <table class="table table-striped table-bordered">
                                    <thead>
                                        <tr>
                                            <th>物料名称</th>
                                            <th>物料编码</th>
                                            <th>申请数量</th>
                                            <th>实际数量</th>
                                            <th>单价</th>
                                            <th>总金额</th>
                                            <th>批次号</th>
                                            <th>质检状态</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        {volist name="row.items" id="item"}
                                        <tr>
                                            <td>{$item.material.material_name}</td>
                                            <td>{$item.material.material_code}</td>
                                            <td>{$item.request_quantity} {$item.material.unit}</td>
                                            <td>
                                                <input type="number" class="form-control" name="items[{$item.id}][actual_quantity]" 
                                                       value="{$item.actual_quantity}" step="0.01" min="0" 
                                                       onchange="calculateTotal({$item.id})" style="width: 100px;">
                                            </td>
                                            <td>
                                                <input type="number" class="form-control" name="items[{$item.id}][unit_price]" 
                                                       value="{$item.unit_price}" step="0.01" min="0" 
                                                       onchange="calculateTotal({$item.id})" style="width: 100px;">
                                            </td>
                                            <td>
                                                <span id="total_{$item.id}" class="total-amount">¥{$item.total_amount}</span>
                                            </td>
                                            <td>
                                                <input type="text" class="form-control" name="items[{$item.id}][batch_no]" 
                                                       value="{$item.batch_no}" style="width: 120px;">
                                            </td>
                                            <td>
                                                {if $item.quality_status == 1}
                                                <span class="label label-warning">待检</span>
                                                {elseif $item.quality_status == 2}
                                                <span class="label label-success">合格</span>
                                                {elseif $item.quality_status == 3}
                                                <span class="label label-danger">不合格</span>
                                                {/if}
                                            </td>
                                        </tr>
                                        {/volist}
                                    </tbody>
                                    <tfoot>
                                        <tr>
                                            <td colspan="5" class="text-right"><strong>合计：</strong></td>
                                            <td><strong id="grand-total">¥{$row.total_amount}</strong></td>
                                            <td colspan="2"></td>
                                        </tr>
                                    </tfoot>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="row">
                <div class="col-sm-12">
                    <div class="form-group">
                        <div class="col-sm-offset-2 col-sm-10">
                            <button type="submit" class="btn btn-success">
                                <i class="fa fa-save"></i> 保存明细
                            </button>
                            <a href="javascript:history.back();" class="btn btn-default">
                                <i class="fa fa-arrow-left"></i> 返回
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </form>
    </div>
</div>

<script>
function calculateTotal(itemId) {
    var actualQuantity = parseFloat($('input[name="items[' + itemId + '][actual_quantity]"]').val()) || 0;
    var unitPrice = parseFloat($('input[name="items[' + itemId + '][unit_price]"]').val()) || 0;
    var total = actualQuantity * unitPrice;
    
    $('#total_' + itemId).text('¥' + total.toFixed(2));
    
    // 计算总计
    var grandTotal = 0;
    $('.total-amount').each(function() {
        var amount = parseFloat($(this).text().replace('¥', '')) || 0;
        grandTotal += amount;
    });
    
    $('#grand-total').text('¥' + grandTotal.toFixed(2));
}

// 页面加载时计算一次总计
$(document).ready(function() {
    var grandTotal = 0;
    $('.total-amount').each(function() {
        var amount = parseFloat($(this).text().replace('¥', '')) || 0;
        grandTotal += amount;
    });
    $('#grand-total').text('¥' + grandTotal.toFixed(2));
});
</script>